<template>
  <page-view class="page-box">
    <el-row>
      <el-col>
        <vue-esign
            v-show="!resultImg || resultImg.length == 0"
            class="my-sign"
            ref="mySign"
            :width="canWidth"
            :height="canHeight"
            :isCrop="isCrop"
            :lineWidth="lineWidth"
            :lineColor="lineColor"
            :bg-color="bgColor"
        />
      </el-col>
      <el-col style="overflow: auto;" v-show="resultImg && resultImg.length > 0">
<!--        <transition appear name="roate">-->
<!--          <img class="result-img" :style="{ transform: 'rotate(' + rotateDegree + 'deg)' }" :src="resultImg" alt="">-->
<!--        </transition>-->
        <img class="result-img" :style="{ transform: 'rotate(' + rotateDegree + 'deg)' }" :src="resultImg" alt="">
      </el-col>
    </el-row>
    <div class="function-btn" v-if="!resultImg || resultImg.length == 0">
      <el-button class="clear-btn" @click="handleReset">清空画板</el-button>
      <el-button
          class="save-btn"
          @click="handleGenerate"
      >
        生成图片
      </el-button>
    </div>
  </page-view>
</template>

<script>
import VueEsign from 'vue-esign';
import {util} from "@/utils/util";
import clipboard3 from  'vue-clipboard3'
export default {
  components: {
    VueEsign,
  },
  data() {

    let appW = util.getAppWidth();
    let appH = util.getAppHeight();

    return {
      canWidth: appW - 110, // 画布宽度--是不会超出父元素的宽度的--设置也不行
      canHeight: appH - 100, // 画布高度--是不会超出父元素的宽度的--设置也不行
      lineWidth: 6,//画笔粗细
      lineColor: '#000000',//画笔颜色
      bgColor: '',//画布背景
      isCrop: false,//是否裁剪
      isClearBgColor: true,//是否清空背景色
      resultImg:'',
      copyText:"111",
      rotateDegree:-90,
    }
  },
  mounted() {

    // 强行更改画布所在父视图宽高
    let w = this.canWidth;
    let h = this.canHeight;

    // 强行更改画布本身宽高
    const canvas = this.$refs.mySign.$refs.canvas;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';

    console.log('canvasW:', w);
    console.log('canvasH:', h);
  },
  methods:{
    handleReset() {
      console.log('清除');
      // 画布被清除时 背景色也被清除
      this.$refs.mySign.reset();

      // 重新设置背景色
      const canvas = this.$refs.mySign.$refs.canvas;
      console.log('canvas.width:', canvas.width);
      console.log('canvas.height:', canvas.height);

      const ctx = canvas.getContext('2d');
      ctx.fillStyle = "#f3f4f5";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    },

    handleGenerate() {
      // console.log('生成图片');

      // 引入复制方法
      const { toClipboard } = clipboard3();
      this.$refs.mySign.generate().then(res => {
        console.log('图片结果：', res);
        this.resultImg = res;

        // Base64编码图像转化为Blob对象
        let imageBlob = this.base64ToBlob(res);
        // Blob对象转化为图片链接
        let imageUrl = URL.createObjectURL(imageBlob);
        toClipboard(imageUrl);

      }).catch(err => {
        // 画布没有签字时会执行这里 'Not Signned'
        alert(err)
      })
    },

    getResultImageClass() {

    },

    /**
     * Base64编码图像转化为Blob对象
     * @param dataUrl
     * @returns {*}
     */
    base64ToBlob(dataUrl) {
      let arr = dataUrl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
}
</script>

<style lang="scss" scoped>

.page-box {
  position: relative;
}

.my-sign {
  // 左侧留出一部分距离用于底部放签名的按钮
  margin: 50px 30px 50px 80px;
  border: 1px solid #ededed;
}

/* 功能按钮部分 */
.function-btn {
  width: 250px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 上述代码中，position属性用于指定元素的定位方式为fixed。top和left属性用于把元素定位于页面的中心位置，
  // translate()函数用于调整元素的位置，使得元素旋转后仍处于中心位置。同时，rotate()函数用于指定元素旋转90度。
  position: fixed;
  top: 50%;
  left: 50%;
  //transform: translate(-50%, -50%) rotate(90deg); // 旋转后还是居中位置
  transform: translate(-110%, -50%) rotate(90deg); // 用以调整位置 使其看着自然 这其实是旋转后横向的视觉 并不是手机真正转屏
}

/* 重写按钮 */
.clear-btn {
  width: 80px;
  height: 40px;
}

/* 保存按钮 */
.save-btn {
  width: 80px;
  height: 40px;
}

// 旋转动画
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
  transform: rotate(45deg);
}

// 签名图片
.result-img {
  // 通过设置container的position为relative，将图片的position设置为absolute，并设置其top和left为50%，即可使其位于父容器的中心
  // 这种旋转方式 并没有更改图片本身 只是显示的样式更改了
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(45deg);
}

</style>
